page-webcast-index {
    @function computed-vw($px) {
        @return $px/1080*100vw;
    }
    $img-proportion: 750/283;
    $title-color: #1f2e2a;
    .toolbar-ios {
        .back {
            width: 7vw;
            height: 8vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_return.png);
            background-repeat: no-repeat;
        }
        .menu {
            width: 6.5vw;
            height: 5.5vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_menu.png);
            background-repeat: no-repeat;
        }
        .toolbar-title-ios {
            .nav-btn {
                height: 100%;
                color: #fff;
                background-color: transparent;
                font-size: 5vw;
                padding: 0;
                width: 87.5px;
                text-align: center;
                &_active {
                    color: rgb(255, 202, 55);
                }
            }
        }
    }
    .scroll-content {
        background-color: #ffffff;
    }
    ion-list {
        width: 100%;
        left: 0;
    }
    .info-hd {
        margin: computed-vw(60) computed-vw(60) 0 computed-vw(60);
        .search-bar {
            float: left;
            width: computed-vw(1080-120-220-30);
            height: computed-vw(124);
            padding: 0 computed-vw(45);
            background: linear-gradient(to right, #63b24c, #018c6e);
            border-radius: computed-vw(62);
            input {
                width: 50vw;
                height: 100%;
                font-size: computed-vw(45);
                border: none;
                padding: 0;
                background: none;
                color: #fff;
                &::placeholder {
                    color: rgba(255,255,255,0.5);
                }
                &:focus {
                    outline: none;
                    border: none;
                }
            }
            i {
                float: right;
                width: 4.5vw;
                height: 4.5vw;
                margin-top: (computed-vw(124) - 4.5)/2;
                background-image: url(../assets/images/client/client-filter/icon_search.png);
                background-size: 100% 100%;
            }
        }
        .button-ios {
            margin: 0 0 0 computed-vw(30);
            font-size: computed-vw(45);
            color: #fff;
            background-color: #f2b91c;
            height: computed-vw(124);
            border-radius: computed-vw(62);
            width: computed-vw(220);
            text-align: center;
        }
    }

    .recommend-wrap {
        margin: computed-vw(60) computed-vw(60) computed-vw(50) computed-vw(60);
    }

    .recommend-wrap div {
        display: inline-block;
    }

    .recommend-wrap-playback div {
        display: inline-block;
    }
    .recommend-flag {
        background-color: #39b54a;
        height: computed-vw(60);
        line-height: computed-vw(60);
        vertical-align: middle;
        width: computed-vw(10);
    }
    .recommend-font {
        border-left:0.926vw solid #35ac63;
        margin-left: 1vw;
        padding-left: 1.85vw;
        font-size: computed-vw(54);
        height: computed-vw(60);
        line-height: computed-vw(65);
        vertical-align: middle;
    }

    .recommend-list {
        margin: computed-vw(66) computed-vw(60) computed-vw(60) computed-vw(60);
    }
    .msl-card {
        position: relative;
        height: computed-vw(600);
        border-radius: computed-vw(15);
        overflow: hidden;
        vertical-align: middle;
        background-color: #fff;
        box-shadow: 0 computed-vw(6) computed-vw(20) 0 rgba(0, 0, 0, 0.1);
        margin-bottom: computed-vw(60);

        .play-img-btn {
            position: absolute;
            left: computed-vw(450);
            top: computed-vw(200);
            width: computed-vw(96);
            height: computed-vw(96);
            background: url('../assets/images/webcast/icon_paly.png') no-repeat center ;
            background-size: computed-vw(96);
        }

        .msl-card-img {
            border: none;
            vertical-align: middle;
            width: computed-vw(960);
            height: computed-vw(480);
            overflow: hidden;
            object-fit: fill;
        }
        .msl-card-ft {
            .msl-card_title {
                height: computed-vw(60);
                word-break: break-all;
                overflow: hidden;
                font-size: computed-vw(45);
                margin: computed-vw(28) computed-vw(48);
                color: $title-color;
            }
            .statu-bar{
                margin-right:computed-vw(30);
            }
        }
        &-label {
            width: auto;
            min-width:21vw;
            height: computed-vw(80);
            padding:0 3vw;
            display:flex;
            justify-content: center;
            align-items: center;
            border-radius: computed-vw(50);
            font-size: computed-vw(36);
            color: #fff;

            &_living {
                background-color: #2bb565;
            }
            &_on_time {
                background-color: #ffca38;
            }

            &_play_back{
                background-color: #005c97;
            }
        }
    }

    .division-area {
        background-color: #f1f1f2;
        height: computed-vw(40);
        width: 100%;
    }

    .playback-wrap {
        margin: 0 computed-vw(60) computed-vw(0) computed-vw(60);
        .playback-nav {
            display: inline-block;
            div {
                width: computed-vw(214);
                height: computed-vw(80);
                font-size: computed-vw(42);
                line-height: computed-vw(80);
                vertical-align: middle;
                text-align: center;
                border-radius: computed-vw(10);
            }

            .fourth-margin{
                margin: 0 computed-vw(0) computed-vw(30) 0 ;
            }

            .other-margin{
                margin: 0 computed-vw(34) computed-vw(30) 0 ;
            }
            .selected {
                color: #FFF;
                border: 1px solid #37a74a;
                background-color: #2cb265;
            }

            .not-selected {
                color: #37a74a;
                background-color: #FFF;
                border: 1px solid #37a74a;
            }
        }

        .playback-list {
            margin-top: computed-vw(20);
            div {
                display: inline-block;
            }
            .play-img-btn {
                position: absolute;
                left: computed-vw(181);
                top: computed-vw(70);
                width: computed-vw(96);
                height: computed-vw(96);
                background: url('../assets/images/webcast/icon_paly.png') no-repeat center ;
                background-size: computed-vw(96);
            }
            .evenMargin{
                margin-left: computed-vw(42);
            }
            .play-video-item {
                box-shadow: 0 computed-vw(10) computed-vw(40) 0 rgba(0, 0, 0, 0.1);
                width: computed-vw(459);
                height: computed-vw(440);
                margin-bottom: computed-vw(50);
                position: relative;
                .play-video-detail {
                    width: 100%;
                    height: computed-vw(240);
                    overflow: hidden;
                }
                .play-video-img{
                    height: computed-vw(240);
                    width: 100%;
                    overflow: hidden;
                }
                .play-video-other {
                    height: computed-vw(170);
                    overflow: hidden;
                }
                .play-video-title {
                    padding: computed-vw(10) computed-vw(10) 0 computed-vw(36);
                    font-size: computed-vw(38);
                    width: 100%;
                    height: computed-vw(110);
                    overflow: hidden;
                    word-break: break-all;
                    color: #1F212A;
                }

                .play-video-time {
                    width: computed-vw(400);
                    margin-left: computed-vw(36);
                    font-size: computed-vw(33);
                    height: computed-vw(50);
                    line-height: computed-vw(50);
                    vertical-align: bottom;
                    color: #999;
                }
            }
        }
    }

    .more-video-area {
        margin: 0 auto;
        color:#000;
        background-color: #f5f5f5;
        width: computed-vw(960);
        height: computed-vw(105);
        line-height: computed-vw(105);
        vertical-align: middle;
        text-align: center;
        font-size: computed-vw(36);
        border-radius: computed-vw(5);
    }

    .bottom-warp {
        margin-bottom: computed-vw(50);
    }

    .msl-card-ft{
        display:flex;
        justify-content: space-between;
        align-items: center;
    }
}
